import { TComponent } from '@material/typeing';
import { Button as TaroButton, ButtonProps as TaroButtonProps } from '@tarojs/components';
import { ForwardRefRenderFunction, forwardRef, MouseEvent } from 'react';

import { clsx } from 'react-runtime-clsx';
import $style from './index.scss';

export interface ButtonProps
    extends TComponent,
        Omit<TaroButtonProps, 'type' | 'className' | 'style' | 'size' | 'onClick'> {
    color?: string;

    block?: boolean;
    loading?: boolean;
    disabled?: boolean;
    icon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    nativeType?: 'submit' | 'reset' | 'button';
    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
}
const defaultProps = {
    color: '',
    loading: false,
    disabled: false,
    block: false,
    icon: null,
    rightIcon: null
} as Required<ButtonProps>;
const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = function (props, ref) {
    const { style } = {
        ...defaultProps,
        ...props
    };

    return (
        <TaroButton
            ref={ref}
            className={clsx([$style.button])}
            style={{ ...style }}
        >
            按钮
        </TaroButton>
    );
};

const KButton = forwardRef(Button);

export default KButton;
